import React, { PureComponent } from 'react'
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { Divider } from '../../widgets'

const firstImg = require('../../assets/cp/cp_1.png')
const secondImg = require('../../assets/cp/cp_2.png')
const thirdImg = require('../../assets/cp/cp_3.png')

export default class extends PureComponent {
  static defaultProps = {
    className: 'content12',
  };

  getDelay = e => e % 3 * 100 + Math.floor(e / 3) * 100 + 300;



  render() {
    const props = { ...this.props };
    const isMode = props.isMode;
    delete props.isMode;
    const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' };

    const contentArr = [{
      icon: firstImg,
      title: '个人管家'
    }, {
      icon: secondImg,
      title: '企税管家'
    }, {
      icon: thirdImg,
      title: '工薪管家'
    }]
    const children = contentArr.map((item, i) => {
      const id = `block${i}`;
      const delay = this.getDelay(i * 1);
      const liAnim = { opacity: 0, type: 'from', ease: 'easeOutQuad', delay };
      const childrenAnim = { ...liAnim, x: '+=10', delay: delay + 100};
      return (<TweenOne
        component="div"
        animation={liAnim}
        key={i}
        className={`${props.className}-contentWrapper-cell`}
        id={`${props.id}-${id}`}
      >
        <TweenOne
          className="img"
          key="img"
          animation={{ ...childrenAnim }}
        >
          <img  src={item.icon} width="100%" />
        </TweenOne>
        <TweenOne animation={childrenAnim} className="text" key="title" component="p">
          {item.title}
        </TweenOne>
      </TweenOne>);
    });
    return (
      <div {...props} className={`content-template-wrapper ${props.className}-wrapper`}>
        <OverPack
          className={`content-template ${props.className}`}
          location={props.id}
        >
          <TweenOne
            key="h1"
            animation={oneAnim}
            component="div"
            className={`${props.className}-tit`}
            reverseDelay={100}
          >
            <div className={`${props.className}-tit-t`}>便捷,高效的产品</div>
            <Divider />
          </TweenOne>
          <div
            key="ul"
            type="bottom"
            className={`${props.className}-contentWrapper`}
          >
            {children}
          </div>
        </OverPack>
      </div>
    )
  }
}
